<template>
  <div class="app-container">
    <el-row>
      <el-col :span="10">
        <el-button type="primary">新增菜单</el-button>
        <el-tree
          ref="tree"
          :check-strictly="checkStrictly"
          :data="routesData"
          :props="defaultProps"
          show-checkbox
          node-key="path"
          class="permission-tree"
        />
      </el-col>
      <el-col :span="12" :offset="2">
        <el-form :model="form" label-width="130px">
          <el-form-item label="父级菜单">
            <el-input v-model="form.parentId" disabled />
          </el-form-item>
          <el-form-item label="菜单名称">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="路由路径">
            <el-input v-model="form.path" />
          </el-form-item>
          <el-form-item label="路由名称">
            <el-input v-model="form.routerName" />
          </el-form-item>
          <el-form-item label="icon">
            <el-select v-model="form.icon">
              <el-option
                v-for="item in elementIcons"
                :key="item"
                :value="'el-icon-' + item"
              >
                <i :class="'el-icon-' + item" /><span style="margin-left: 12px;">{{ item }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否展示在菜单">
            <el-radio v-model="form.hidden" label="0">展示</el-radio>
            <el-radio v-model="form.hidden" label="1">隐藏</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button>删除</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import elementIcons from './element-icons';

export default {
  data() {
    return {
      elementIcons,

      checkStrictly: false,
      routesData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      form: {
        hidden: '0'
      }
    };
  },
  created() {
  },
  methods: {
    onSubmit() {}
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
